import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  ViewChild,
} from '@angular/core';
import { UtilsService } from '../../../service/utils.service';
import { UserService } from '../../../service/user.service';
import { YearawardService } from '../yearaward.service';
import { BaseService } from 'src/app/service/base.service';
@Component({
  selector: 'app-rongyu',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss'],
})
export class RongyuComponent implements OnInit {
  @Input() isNotstart = true; // 是否预热
  @Output() toClose = new EventEmitter<any>();
  @ViewChild('mark', { static: false }) main: ElementRef;
  /* ___ _ ___ */
  /* ___ _ ___ */
  public deployUrl: string = '';
  public isPC = false; /* 是否pc */
  public isAndroid = false; /* 是否安卓 */

  public headerMaskShow = false; /* 主播信息显示 */
  /* ___ _ ___ */
  public observer: IntersectionObserver;

  public dataMap: Record<
    0 | 1 | 2 | 3 | 4,
    [EndYear.Rongyu.IItem, EndYear.Rongyu.IItem, EndYear.Rongyu.IItem] | []
  > = {
    0: [],
    1: [],
    2: [],
    3: [],
    4: [],
  };

  public list: (
    | [EndYear.Rongyu.IItem, EndYear.Rongyu.IItem, EndYear.Rongyu.IItem]
    | []
  )[] = [];

  constructor(
    private utilsService: UtilsService,
    private userService: UserService,
    private baseService: BaseService,
    private yearawardService: YearawardService
  ) {}

  ngOnInit() {
    this.deployUrl = this.userService.getDeployUrl();
    this.isPC = this.userService.getIsPc();
    this.isAndroid = this.utilsService.getBrowserVersion();

    this.getList();
  }
  public closeClick() {
    console.log('=>', 'close');
    this.toClose.emit();
  }
  getList() {
    this.yearawardService.getRongyuList(
      (res) => {
        const data = res.data ?? {};
        for (const key in this.dataMap) {
          this.dataMap[key] =
            data[key] && data[key].length > 0
              ? data[key]
              : Array(3).fill({
                  avatarUrl:
                    this.deployUrl +
                    'assets/img/end-year/rongyu/default-avatar.png',
                  nickname: '虚位以待',
                });
        }

        this.list = Object.values(this.dataMap);
      },
      (err) => {}
    );
  }

  /**
   * @description: 跳转直播间
   */
  public goToRoom(
    item: Record<string, any>,
    type: 'anchor' | 'user' = 'anchor'
  ) {
    item.uid = item.uid ?? item.anchorUid;
    if (
      (type === 'anchor' && !item.uid) ||
      (type === 'user' && !item.userUid)
    ) {
      return;
    }
    const obj = { ...item };
    if (type === 'anchor') {
      obj.isMysteryMan = false;
    }
    obj.livImage = item.avatarUrl;
    this.utilsService.gotoRoom(obj, type);
  }

  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.

    this.observer = this.baseService.useIntersectionObserver(
      this.main.nativeElement,
      (visibility) => {
        this.headerMaskShow = !visibility;
      },
      {
        threshold: 1.0,
        rootMargin: '0px 0px 0px 0px',
      }
    );
  }
}
